<template>
  <el-card style="width: 100%; text-align: center">
    <template #header>
      <div class="card-header">
        <h3 style="color: #1677ff">通道列表</h3>
      </div>
      <!-- 搜索区 -->
      <el-form :model="form" label-width="auto" style="display: flex; margin-top: 20px">
        <a-button @click="Above" style="background-color: #404d59; color: #fff"
          ><template #icon><LeftOutlined /></template>返回</a-button
        >
        <el-form-item label="搜索">
          <el-input v-model="form.name" placeholder="关键字" />
        </el-form-item>
        <!-- 通道类型 -->
        <el-form-item label="通道类型" style="width: 200px; margin-left: 20px">
          <el-select v-model="form.region" placeholder="全部" clearable>
            <el-option label="全部" value="shanghai" />
            <el-option label="设备" value="beijing" />
            <el-option label="子目录" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="在线状态" style="width: 200px; margin-left: 20px">
          <el-select v-model="form.region" placeholder="全部" clearable>
            <el-option label="全部" value="shanghai" />
            <el-option label="开启" value="beijing" />
            <el-option label="关闭" value="shanghai" />
          </el-select>
        </el-form-item>
      </el-form>
    </template>

    <a-modal v-model:open="open" title="弹框" @ok="handleOk">
      <!-- 视频 -->
      <LivePlayer videoUrl="https://media.w3.org/2010/05/sintel/trailer.mp4" fluent autoplay live stretch></LivePlayer>
    </a-modal>
    <!-- 表格 -->
    <a-table :columns="columns" :data-source="data" @change="onChange" :scroll="{ x: 1300, y: 1000 }">
      <template #bodyCell="{ column }">
        <template v-if="column.dataIndex === 'operation'">
        
            <a-button @click="playVideo" style="background-color: #404d59; color: #fff"
              ><template #icon><PlayCircleOutlined /></template>播放</a-button
            >
         
          <a-button v-if="isStopped" @click="stopVideo" style="background-color: red; color: #fff"
            ><template #icon><BorderOutlined /></template>停止</a-button
          >
          <a-button type="primary" @click="Channel"
            ><template #icon><VideoCameraOutlined /></template>设备录像</a-button
          >
        </template>
      </template>
      <!-- 视频弹框 -->

      <!-- 快照 -->
      <template slot="snapshot" slot-scope="snapshot">
        <img style="width: 80px; height: 80px" :src="snapshot" alt="" />
      </template>
    </a-table>
  </el-card>
</template>

<script setup>
   
import { router } from '/@/router';
import { reactive, ref} from 'vue';
  import LivePlayer from '@liveqing/liveplayer-v3';
  const isStopped = ref(false);

  function playVideo() {
    // 播放视频的逻辑// 视频弹框
    console.log('Play video');
    isStopped.value = true;
    open.value = true;
}
  const open = ref(false)
  const handleOk = (e) => {
    console.log(e);
    open.value = false;
  };

  function stopVideo() {
    // 停止视频的逻辑
    console.log('Stop video');
    isStopped.value = false;
  }

  // 通道列表返回到上一个页面
  function Above() {
    router.go(-1);
}
const Channel = () => {
  router.push({path:'/VideoSystem/ChannelAdaptation0'})
 }

  // ------------------------------------------------------------------
  const bodystyle = {
    height: '500px',
    overflow: 'hidden',
    overflowY: 'scroll',
  };
  const form = reactive({
    name: '',
    region: '',
    address: '',
    type: '',
    National: '',
  });
  const formRef = ref();
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 13,
  };
  const formState = reactive({
    name: '',
    region: undefined,
    date1: undefined,
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  });
  const rules = {
    name: [
      {
        required: true,
        message: 'Please input Activity name',
        trigger: 'change',
      },
    ],
  };

  // 表格
  const columns = [
    {
      title: '通道号',
      dataIndex: 'Thoroughfare',
      width: 100,
      sorter: {
        compare: (a, b) => a.Thoroughfare - b.Thoroughfare,
        multiple: 4,
      },
    },

    {
      title: '通道国际编号',
      dataIndex: 'chinese',
      width: 200,
      sorter: {
        compare: (a, b) => a.chinese - b.chinese,
        multiple: 3,
      },
    },
    {
      title: '通道名称',
      dataIndex: 'math',
      width: 200,
    },
    {
      title: '快照',
      // dataIndex: 'snapshot',
      scopedSlots: { customRender: 'snapshot' },
      width: 100,
    },
    {
      title: '在线状态',
      dataIndex: 'address',
      width: 100,
    },
    {
      title: '开启音频',
      dataIndex: 'agreement',
      width: 100,
    },
    {
      title: '按需直播',
      dataIndex: 'broadcast',
      width: 100,
    },
    {
      title: '云端录像',
      dataIndex: 'frequency',
      width: 100,
    },
    {
      title: '开启分享',
      dataIndex: 'recording',
      width: 100,
    },
    {
      title: '在线人数',
      dataIndex: 'register',
      width: 100,
    },
    {
      title: '子节点数',
      dataIndex: 'newtime',
      width: 100,
    },
    {
      title: '厂家',
      dataIndex: 'Creationtime',
      width: 220,
    },
    {
      title: '云台类型',
      dataIndex: 'gimbaltype',
      width: 100,
    },
    {
      title: '位置',
      dataIndex: 'position',
      width: 200,
    },
    {
      title: '更新时间',
      dataIndex: 'renew',
      width: 200,
      sorter: {
        compare: (a, b) => a.renew - b.renew,
        multiple: 2,
      },
    },
    {
      title: '创建时间',
      dataIndex: 'create',
      width: 200,
      sorter: {
        compare: (a, b) => a.create - b.create,
        multiple: 1,
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 320,
      fixed: 'right',
    },
  ];
  const data = [
    {
      key: '1',
      Thoroughfare: '',
      chinese: '',
      math: '',
      snapshot: '',
      address: '',
      agreement: '',
      broadcast: '',
      frequency: '',
      recording: '',
      newtime: '',
      register: '',
      Creationtime: '',
      operation: '',
      gimbaltype: '',
      position: '',
    },
  ];
</script>

<style scoped></style>
